<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div>
    <ul class="layui-timeline">
        <div id="logisticsSpreadDetail">
            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title"></div>
                </div>
            </li>
        </div>
    </ul>
</div>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../../lib/common/common.js" charset="utf-8"></script>
<script src="../../lib/common/commonApi.js" charset="utf-8"></script>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script>

    window.onload = function () {
        let id = GetQueryString("id");

        if (isNotNull(id)) {
            // 初始化快递公司列表
            init(id);
        } else {
            layer.msg('数据异常，请重试');
            setTimeout(function () {
                let iframeIndex = parent.layer.getFrameIndex(window.name);
                parent.layer.close(iframeIndex);
            }, 1500);
        }
    }

    /**
     * 初始化数据
     */
    function init(id) {
        let data = {id: id, logisticsModule: 'GROUPBUY'};
        $.ajax({
            type: "POST",
            url: '/express/query/realTime/logistics',
            data: JSON.stringify(data),
            dataType: 'json',
            contentType: 'application/json; charset=UTF-8',
            success: function (req) {
                if (req.code === '200') {
                    let data = req.data;
                    let logisticsDynamicList = data.logisticsDynamicList;
                    if (logisticsDynamicList === null) {
                        layer.msg('物流信息还未更新，请稍后在试');
                        setTimeout(function () {
                            let iframeIndex = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(iframeIndex);
                        }, 1500);
                    }
                    if (logisticsDynamicList.length === 0) {
                        layer.msg('物流信息还未更新，请稍后在试');
                        setTimeout(function () {
                            let iframeIndex = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(iframeIndex);
                        }, 1500);
                    }
                    let logisticsSpreadDetailHtml = '';
                    for (let i = 0; i < logisticsDynamicList.length; i++) {
                        if (i === 0) {
                            logisticsSpreadDetailHtml += '<li class="layui-timeline-item">\n' +
                                '                <i class="layui-icon layui-timeline-axis"></i>\n' +
                                '                <div class="layui-timeline-content layui-text">\n' +
                                '                    <div class="layui-timeline-title" style="color: #3f983b;">' + logisticsDynamicList[i].ftime + ' ' + logisticsDynamicList[i].context + '</div>\n' +
                                '                </div>\n' +
                                '            </li>'
                        } else {
                            logisticsSpreadDetailHtml += '<li class="layui-timeline-item">\n' +
                                '                <i class="layui-icon layui-timeline-axis"></i>\n' +
                                '                <div class="layui-timeline-content layui-text">\n' +
                                '                    <div class="layui-timeline-title">' + logisticsDynamicList[i].ftime + ' ' + logisticsDynamicList[i].context + '</div>\n' +
                                '                </div>\n' +
                                '            </li>'
                        }

                    }
                    $('#logisticsSpreadDetail').html(logisticsSpreadDetailHtml);
                } else {
                    layer.msg(req.msg);
                    setTimeout(function () {
                        let iframeIndex = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(iframeIndex);
                    }, 1500);
                }
            },
            error: function (e) {
                layer.msg("数据有误");
            }
        })
    }
</script>

</body>
</html>